import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { SunshineNgZorroAntdModule } from '../../../ng-zorro-module';
import { NzIconDirective } from 'ng-zorro-antd/icon';

@Component({
  selector: 'nz-demo-form-advanced-search',
  standalone: true,
  imports: [SunshineNgZorroAntdModule, NzIconDirective],
  template: `
    <form nz-form [formGroup]="validateForm" class="ant-advanced-search-form">
      <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="8" *ngFor="let control of controlArray" [hidden]="!control.show">
          <nz-form-item>
            <nz-form-label [nzFor]="'field' + control.index">Field {{ control.index }}</nz-form-label>
            <nz-form-control>
              <input  nz-input  placeholder="placeholder"  [formControlName]="'field' + control.index"  [attr.id]="'field' + control.index"  />
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
       <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="4"  >
          <nz-form-item>
            <nz-form-label [nzFor]="'userName'">用户名</nz-form-label>
            <nz-form-control><input  nz-input  placeholder="用户名"  [formControlName]="'userName'"  [attr.id]="'userName'"  /></nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="8"  >
          <nz-form-item >
            <nz-form-label [nzFor]="'sex'">性别</nz-form-label>
            <nz-form-control [nzSpan]="4" nzPush="0.7" >
              <nz-select [formControlName]="'sex'">
                <nz-option nzValue=1 nzLabel="男" ></nz-option>
                <nz-option nzValue=2 nzLabel="女"></nz-option>
                <nz-option nzValue=3 nzLabel="未知" nzDisabled></nz-option>
              </nz-select>
            </nz-form-control>
            <nz-form-label [nzFor]="'sex'" nzPush="2">部门</nz-form-label>
            <nz-form-control nzPush="2">
               <nz-select nzMode="multiple" nzPlaceHolder="Inserted are removed" [formControlName]="'departmentCodeList'" >
                  <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
                  <nz-option *ngFor="let option of defaultOption" [nzLabel]="option" [nzValue]="option" nzHide></nz-option>
               </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row>
        <div nz-col [nzSpan]="24" class="search-area">
          <button nz-button [nzType]="'primary'" (click)="search()">搜索</button>
          <button nz-button (click)="resetForm()">清空</button>
          <button nz-button (click)="toggleCollapse()">展开</button>
          <button nz-button (click)="toggleCollapse()">折叠</button>
        </div>
      </div>
    </form>
    <div class="search-result-list">Search Result List</div>
  `,

  styles: [
    `
      .ant-advanced-search-form {
        padding: 24px;
        background: #fbfbfb;
        border: 1px solid #d9d9d9;
        border-radius: 6px;
      }

      .search-result-list {
        margin-top: 16px;
        border: 1px dashed #e9e9e9;
        border-radius: 6px;
        background-color: #fafafa;
        min-height: 200px;
        text-align: center;
        padding-top: 80px;
      }

      [nz-form-label] {
        overflow: visible;
      }

      button {
        margin-left: 8px;
      }

      .collapse {
        margin-left: 8px;
        font-size: 12px;
      }

      .search-area {
        text-align: right;
      }
    `
  ]
})
export class NzDemoFormAdvancedSearchComponent implements OnInit {

  validateForm!: FormGroup;
  controlArray: Array<{ index: number; show: boolean }> = [];
  isCollapse = true;
  listOfOption = [{ label: '部门1', value: 1 }, { label: '部门2', value: 2 }];
  listOfSelectedValue = ['Default 01', 'Default 02'];
  defaultOption = [...this.listOfSelectedValue];

  selectedValue = 'Default';

  toggleCollapse(): void {
    this.isCollapse = !this.isCollapse;
    this.controlArray.forEach((c, index) => {
      c.show = this.isCollapse ? index < 6 : true;
    });
  }

  resetForm(): void {
    console.log('va = ', this.validateForm.value)
    this.validateForm.reset();
  }

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.validateForm = this.fb.group({});
    for (let i = 0; i < 10; i++) {
      this.controlArray.push({ index: i, show: i < 6 });
      this.validateForm.addControl(`field${i}`, new FormControl());
    }
    // 设置初始值
    this.validateForm.addControl(`userName`, new FormControl('zhangsan'));
    this.validateForm.addControl(`sex`, new FormControl('1'));
    this.validateForm.addControl(`departmentCodeList`, new FormControl([1, 2]));
    console.log('调用初始化。。。')
  }


  search() {
    console.log('搜索 = ', this.validateForm.value)
    console.log('搜索invalid = ', this.validateForm.invalid)
  }
}
